<template>
  <div class="container">
    <!-- 详情页有一个下拉滑动导航栏显隐的问题 -->
    <div class="header" v-show="isVisable">
      <div class="hidetitle">{{ detailmovie.article_title }}</div>
    </div>
    <!-- <div class="tips">提示:滑动鼠标滚轮可看到导航栏显隐</div> -->
    <!-- 返回上一个页面--https://quanyi.blog.csdn.net/article/details/91045282?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-91045282-blog-106385544.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-91045282-blog-106385544.pc_relevant_default&utm_relevant_index=1 -->
    <i class="el-icon-close" @click="$router.go(-1)"></i>
    <!-- 页面本身 -->
    <div class="box">
      <img
        :src="'http://localhost:3001/' + detailmovie.article_picture"
        alt=""
      />
      <div class="describe">
        <p class="title">{{ detailmovie.article_title }}</p>
        <p class="number">点击:{{ detailmovie.article_views }}</p>
        <p class="number">评论:{{ detailmovie.count }}</p>
        <p class="number">点赞:55555</p>
        <p class="main" v-html="detailmovie.article_content">
          <!-- 文章内容:{{ detailmovie.article_content }} -->
        </p>
      </div>
    </div>
    <ul class="footer">
      <li>
        <label class="lab" for="checkbox">
          <input type="checkbox" id="checkbox" hidden />
          <svg
            t="1639040689615"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2330"
          >
            <path
              d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z"
              p-id="2331"
              id="heart"
            ></path>
          </svg>
          <span class="hearts" @click="handlelike()"></span>
        </label>
        <p class="zan">点赞</p>
      </li>
      <li>
        <div class="sqcang">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
          <p>
            <span class="shoucang">在看</span>
          </p>
        </div>
      </li>
    </ul>
    <div class="comment">
      <el-input
        @change="handleInput()"
        v-model="conten"
        placeholder="说点什么吧"
        clearable
      ></el-input>
      <div
        class="colloment"
        v-for="(content, index) in contents"
        :key="index.article_id"
      >
        <span>{{ content.comment_content }}</span>
        <span>{{ content.comment_date }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      isVisable: false,
      detailmovie: {},
      conten: '',
      contents: {},
      names: {},
      like: '',
      value: true,
    }
  },
  activated() {
    axios
      .get(`http://localhost:3001/blogArticle/${this.$route.params.id}`)
      .then((res) => {
        // console.log(res.data.result)
        // console.log(res.data)
        this.detailmovie = res.data.result.data
      })
    window.addEventListener('scroll', this.widowScrollListener)
    this.getAriticle()
  },
  deactivated() {
    window.removeEventListener('scroll', this.widowScrollListener)
  },
  mounted() {
    this.getComent()
  },
  methods: {
    getAriticle() {
      axios
        .get(`http://localhost:3001/blogArticle/${this.$route.params.id}`)
        .then((res) => {
          //console.log(res.data.result.data.article_like)
          this.detailmovie = res.data.result.data
          this.like = res.data.result.data.article_like
          // console.log('获取原始状态' + this.like)
        })
    },
    widowScrollListener() {
      //滚动条纵坐标位置--https://blog.csdn.net/huang100qi/article/details/5950894
      var scrollTop = document.documentElement.scrollTop
      if (scrollTop >= 100) {
        this.isVisable = true
      } else {
        this.isVisable = false
      }
    },
    getComent() {
      axios
        .get(`http://localhost:3001/comment/${this.$route.params.id}`)
        .then((res) => {
          console.log(res)
          this.contents = res.data.result
        })
    },
    handleInput() {
      if (this.conten == '') {
        // console.log(this.conten)
        this.$message({
          message: '还没有评论u',
          type: 'warning',
        })
      } else {
        // console.log(this.$route.params.id)
        let obj = {
          user_name: '用户',
          comment_content: this.conten,
          user_email: 'this.email',
          article_id: this.$route.params.id,
          comment_count: 66,
        }
        axios.post('http://localhost:3001/comment', obj).then((res) => {
          const { code, message, result } = res.data
          if (code == 0) {
            this.conten = ''
            this.getComent()
          }
        })
      }
    },
    handlelike() {
      // 异步函数,不能先赋值再传递
      // console.log('点击' + this.like)
      //this.status = Math.pow(1 - this.like, 2)
      // console.log('变化' + this.status)
      axios
        .put(
          `http://localhost:3001/blogArticle/${this.$route.params.id}/like`,
          {
            article_like: Math.pow(1 - this.like, 2),
          }
        )
        .then((res) => {
          // console.log(res.data.result.article_like)
        })
      this.getAriticle()
    },
  },
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  width: 100%;
  height: 600px;
  /* padding: 20px 80px; */
  /* margin: 0 auto; */
}
.header {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  color: red;
  /* height: 60px; */
  line-height: 60px;
  /* margin: 0 auto; */
  background-color: #fff;
}
/* 固定显示条 */
.el-icon-close:before {
  z-index: 100;
  position: fixed;
  /* margin-left: 0px; */
  border-radius: 50%;
  text-align: center;
  font-size: 25px;
  /* cursor: pointer; */
  top: 30px;
  transform: translateY(-50%);
}

.header .hidetitle {
  text-align: center;
  z-index: 1000;
}
/* 详情页主体 */
.box {
  position: relative;
  margin-bottom: 60px;
  margin: 0 40px 60px 40px;
  padding-top: 20%;
}
.box img {
  transform: translate(0, -50px);
  width: 100%;
  /* height: 50%; */
  height: 400px;
  vertical-align: middle;
  /* margin: 0 auto; */
}
.describe {
  margin: 15px;
  font-size: 15px;
}
.describe .title {
  font-size: 25px;
  color: black;
}
.describe .number {
  margin: 20px 0;
  display: inline-block;
  font-size: 10px;
  margin-left: 20px;
}
.describe .main {
  line-height: 35px;
  letter-spacing: 4px;
  text-indent: 2em;
}
.footer {
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 30px;
}
.footer li {
  /* margin-right: 30px; */
  /* margin-left: 23px; */
  margin-bottom: 20px;
  list-style: none;
  height: 20px;
}
.colloment:hover {
  background-color: darkgrey;
}
.comment {
  margin-top: 60px;

  background-color: rgb(232, 232, 232);
}
.comment .el-input {
  margin-bottom: 20px;
}
.comment div {
  padding: 0 20px;
  height: 40px;
}
.comment div span:last-child {
  float: right;
  font-size: 10px;
  color: #999999;
}
.comments {
  margin-top: 10px;
}
.lab {
  /* 鼠标移入,光标变小手 */
  cursor: pointer;
  /* 自定义属性,可通过var函数对其调用 */
  --c: #ff6b81;
}
svg {
  width: 40px;
  /* 溢出可见 */
  overflow: visible;
  /* 相对定位 */
  position: relative;
  z-index: 10;
}
#heart {
  fill: #eee;
  /* stroke属性,可应用于任何种类的线条,文字和元素,就像一个圆的轮廓 */
  stroke: var(--c);
  /* 线条宽度 */
  stroke-width: 20px;
  margin-top: 5px;
  /* 设置线条为虚线,虚线的长度 */
  stroke-dasharray: 2600;
  /* 虚线的位移 */
  stroke-dashoffset: 2600;
  /* 端点为圆头 */
  stroke-linecap: round;
}
.hearts {
  display: block;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 50%;
  /* 绝对定位 居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  /* 设置各个方向的阴影 */
  box-shadow: 0 -160px 0 var(--c), 0 160px 0 var(--c), -160px 0 0 var(--c),
    160px 0 0 var(--c), -120px -120px 0 var(--c), 120px -120px 0 var(--c),
    120px 120px 0 var(--c), -120px 120px 0 var(--c);
}
/* 勾选复选框执行各个动画 */
#checkbox:checked + svg #heart {
  /* 执行动画：动画名 时长 线性的 停留在最后一帧 */
  animation: drawHeart 1s linear forwards;
}
#checkbox:checked ~ .hearts {
  /* 执行动画：动画名 时长 加速后减速 停留在最后一帧 */
  animation: blink 0.5s ease-in-out forwards;
  /* 动画延迟时间 */
  animation-delay: 0.85s;
}
#checkbox:checked + svg {
  /* 执行动画：动画名 时长 线性的 停留在最后一帧 */
  animation: beat 1s linear forwards;
}
.zan {
  color: rgb(255, 107, 129);
}

/* 定义动画 */
/* 画心的动画 */
@keyframes drawHeart {
  0% {
    stroke: var(--c);
    stroke-dashoffset: 2600;
  }
  80% {
    stroke: var(--c);
    stroke-dashoffset: 0;
    fill: #eee;
  }
  100% {
    stroke: var(--c);
    stroke-dashoffset: 0;
    fill: var(--c);
  }
}
/* 小圆点闪出的动画 */
@keyframes blink {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}
/* 心跳动的动画 */
@keyframes beat {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.shoucang {
  color: rgb(19, 206, 102);
  margin-left: 35%;
}
.bushoucang {
  color: rgb(255, 73, 73);
}
.sqcang {
  margin-left: 230px;
}
.sqcang p {
  margin-top: 10px;
  margin-left: -20px;
}
.sqcang p span {
  margin-right: 5px;
}
</style>
